<template>
  <div class="login">
    <div class="login-con">
      <Form
        id="register"
        ref="loginForm"
        :model="form"
        @keydown.enter.native="handleSubmit"
        style="background-color: #fff; border-radius: 10px"
      >
        <div class="login_title">账号登录</div>
<div class="login-body ">
        <FormItem prop="mobile">
          <Input
            size="large"
            clearable
            prefix="ios-contact-outline"
            v-model="form.mobile"
            @on-change="mobileChange"
            placeholder="用户名、公司名或手机号"
          />
        </FormItem>
        <FormItem prop="password">
          <Input
           size="large"
            type="password"
            prefix="ios-lock-outline"
            password
            v-model="form.password"
            placeholder="密码"
          />
        </FormItem>

        <Row style="margin-top: -5px; margin-bottom: 20px; color: #9a9a9a">
          <!-- 单复选框和文字居中 -->
          <Col span="24" style="display: flex; align-items: center">
            <input
              class="checkbox"
              type="checkbox"
              v-model="form.agree"
              :checked="form.agree"
            />&ensp;记住密码
            <font color="#8ebafb" style="cursor: pointer; display: flex; margin-left: auto;" >忘记密码</font>
          </Col>
        </Row>
        <FormItem style="margin-bottom: 15px !important">
          <Button
            @click="handleSubmit"
            class="login_btn"
            type="primary"
            long
            >立即登入</Button
          >
        </FormItem>
        <font color="#fa586f" style="cursor: pointer;font-size: 12px;">还没有账号？免费注册吧 >>></font>
        </div>
      </Form>
    </div>
  </div>
</template>
<script>
// import { setToken,getMainUrl } from '@/libs/util'
import 'normalize.css/normalize.css'
import axios from 'axios'
export default {
  name: 'login',
  data() {
    return {
      icon: {
        // right:require('@/assets/images/正确.png'),
        // err:require('@/assets/images/输入错误.png'),
        // show:require('@/assets/images/显示.png'),
        // hide:require('@/assets/images/隐藏.png'),
      },
      isPassword: false,
      isMobile: false,
      xieyi: {
        show: false
      },
      remember: true,
      seconds: 0,
      mainUrl: 'https://cloud.redsay.net:6443',
      token: '',
      form: {
        mobile: '',
        companyName: '',
        password: '',
        agree: true
      }
    }
  },
  methods: {
    //获取浏览器地址栏中?号后面的参数值
    getQueryString(name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
      var r = window.location.search.substr(1).match(reg)
      if (r != null) return unescape(r[2])
      return null
    },
    handleChange() {
      this.isPassword = !this.isPassword
    },
    findPass() {
      this.$emit('findPass')
    },
    mobileChange(e) {
      this.isMobile =
        this.form.mobile == '' || !/^1[3456789]\d{9}$/.test(this.form.mobile)
          ? false
          : true
    },
    handleSubmit() {
      var that = this
      var data = {
        company: this.form.companyName.replace(/\s*/g, ''),
        userName: this.form.companyName,
        password: this.form.password
      }
      let channel = this.getQueryString('channel') //渠道来源,1是从百度进来的,2是从360进来的
      console.log('channel==', channel)
      this.form.companyName = this.form.companyName.replace(/\s*/g, '')
      if (
        this.form.mobile == '' ||
        !/^1[3456789]\d{9}$/.test(this.form.mobile)
      ) {
        this.$Message.error('手机号码有误，请充填')
        return
      }
      if (
        this.form.password.replace(/\s*/g, '') == '' ||
        this.form.password.length < 6 ||
        this.form.password.length > 12
      ) {
        this.$Message.error('请输入6-12位登录密码')
        return
      }

      let param = {
        mobile: this.form.mobile,
        code: this.form.yzm
      }
      if (channel) {
        //渠道来源,1是从百度进来的,2是从360进来的
        data.channel = parseInt(channel)
      } else {
        data.channel = 100
      }

      axios
        .post(that.mainUrl + '/s/account/ValidCode', param, {
          headers: {
            //头部参数
            token: this.token
          }
        })
        .then((res) => {
          if (res.data.state && res.data.state == 'ok') {
            axios
              .post(that.mainUrl + '/s/account/reg', data, {
                headers: {
                  //头部参数
                  token: this.token
                }
              })
              .then((res0) => {
                if (res0.data.state && res0.data.state == 'ok') {
                  this.$Message.success('注册成功！请登录')
                  this.$emit('on-success-valid')
                } else {
                  if (res0.data.msg.indexOf('密码格式不对') != '-1') {
                    this.$Message.error('您的登录密码格式不正确哦~')
                  } else {
                    this.$Message.error(res0.data.msg)
                  }
                }
              })
              .catch((err0) => {
                this.$Message.error(err0)
              })
          } else {
            this.$Message.error(res.data.msg)
          }
        })
        .catch((err) => {})
    },

    uuid() {
      var s = []
      var hexDigits = '0123456789abcdef'
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
      }
      s[14] = '4' // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
      var uuid = s.join('')
      return uuid
    }
  },
  created() {
    this.token = this.uuid()
  }
}
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  background-image: url('../assets/login-bg.png');
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
}
.login-con {
  border-radius: 25px;
  position: absolute;
  right: 160px;
  top: 50%;
  padding: 1.5em;
  -webkit-transform: translateY(-60%);
  transform: translateY(-60%);
  width: 330px;
  right: 14% !important;
  -webkit-box-shadow: 0 0 15px #ededed;
  box-shadow: 0 0 15px #ededed;
}


.login-con .login_title {
  font-weight: 600;
  font-size: 17px;
  color: #fa586f;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e8eaec
}
.login-con .login-body{
  padding: 15px 6px !important;
}
.login_btn{
  
  height: 35px;
  border-radius: 20px;
  background: #fa586f !important;
  border: 1px solid #fa586f !important;
  
}

.login-con .ivu-input {
    height: 40px!important;
}

</style>
